<script>
import { getMembersNum } from "@/api/members/teaching";
import { transferFlowable } from "@/api/members/management";
import { deptTreeSelect } from "@/api/system/user";

export default {
  name: "MemberTransform",
  data() {
    return {
      loading: false,
      member: {},
      depts: [],
      deptOptions: [],
      targetDeptId: undefined,
      submitting: false,
    };
  },
  created() {
    this.init();
  },
  methods: {
    async init() {
      this.loading = true;
      try {
        await Promise.all([this.fetchMember(), this.fetchDepts()]);
      } finally {
        this.loading = false;
      }
    },
    async fetchMember() {
      const res = await getMembersNum();
      this.member = res.data || {};
    },
    async fetchDepts() {
      const res = await deptTreeSelect();
      this.depts = res.data || [];
      this.deptOptions = this.flattenDepts(this.depts);
    },
    flattenDepts(tree, path = []) {
      const list = [];
      (tree || []).forEach((node) => {
        const currentPath = [...path, node.label];
        list.push({ id: node.id, label: currentPath.join(" / ") });
        if (node.children && node.children.length) {
          list.push(...this.flattenDepts(node.children, currentPath));
        }
      });
      return list;
    },
    async submit() {
      if (!this.member || !this.member.membersId) {
        this.$message.error("未获取到会员信息");
        return;
      }
      if (!this.targetDeptId) {
        this.$message.warning("请选择转入的基层工会");
        return;
      }
      const payload = { ...this.member, deptId: this.targetDeptId };
      this.submitting = true;
      try {
        await transferFlowable(payload);
        this.$message.success("转会申请已提交，等待审批");
      } finally {
        this.submitting = false;
      }
    },
  },
};
</script>

<template>
  <div class="app-container">
    <el-card shadow="never">
      <div slot="header" class="clearfix">
        <span>会员转会申请</span>
      </div>

      <el-form :model="member" label-width="100px" v-loading="loading">
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="姓名">
              <el-input v-model="member.membersName" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="工号">
              <el-input v-model="member.membersNum" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="联系电话">
              <el-input v-model="member.membersTel" disabled />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="转入基层工会">
              <el-select v-model="targetDeptId" filterable placeholder="请选择基层工会" style="width: 100%">
                <el-option v-for="opt in deptOptions" :key="opt.id" :label="opt.label" :value="opt.id" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item>
          <el-button type="primary" :loading="submitting" @click="submit">提交审批</el-button>
          <el-button @click="init">刷新</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
  
</template>

<style scoped lang="scss">
.app-container {
  padding: 20px;
}
</style>
